<template>
  <div class="reportListBox"  >
    <n-breadcrumb>
      <n-breadcrumb-item v-for="(item, index) in navStore.getdataAnalysisNavigation" :key="index">
        <div @click="handleNavigation(item, index)">
          {{ item.label }}
        </div>
      </n-breadcrumb-item>
    </n-breadcrumb>
    <div class="reportList">
      
        <div class="reportitem" v-for="(item, index) in data" 
      :key="index">
   <n-card :title="item.label" >
  
      <n-icon size="80">
            <FileTrayFullOutline v-if="item.type == 'file'"></FileTrayFullOutline>
            <Folder v-if="item.type == 'Folder'"></Folder>
          </n-icon>

    <template #action>
      <n-button   type="primary" secondary ghost  round> 编辑 </n-button>
            <n-button type="primary" secondary ghost  round> 删除 </n-button>
    </template>
  </n-card>
        </div>
          
    </div>
  </div>
</template>

<script setup lang="ts">
import { useMessage, NIcon, TreeOption } from 'naive-ui'
import { Folder, FileTrayFullOutline } from '@vicons/ionicons5'
const message = useMessage()
import { useNavStore } from '../../store/useNavStore'
import { ref, h } from 'vue'
const navStore = useNavStore()
const data = ref([
  {
    key: '销售管理',
    pid: '业务主题',
    type: 'Folder',
    label: '销售管理',
    prefix: () => {
      return h(NIcon, null, {
        default: () => h(Folder)
      })
    }
  },
  {
    label: '人员分布.vst',
    key: '人员分布.vst',
    type: 'file',
    pid: '人事管理',
    prefix: () =>
      h(NIcon, null, {
        default: () => h(FileTrayFullOutline)
      })
  }
])
const handleNavigation = (item: any, index: number) => {
  navStore.setdataAnalysisNavigation(navStore.getdataAnalysisNavigation.splice(index, 1))
  navStore.setdefaultSelectedKeys(item.key)
}
</script>

<style lang="scss" scoped>
.reportListBox{
 min-height: calc(100vh - #{$--header-height} * 2 - 2px );
}
.treebox {
  margin-top: 10px;
}
.reportList {
  padding: 25px;
  display: grid;
  grid-template-columns: 1fr 1fr 1fr 1fr;
  grid-gap: 20px 20px;
  .reportitem {
    height: 150px;
  }
}
</style>
